<html>
   <head>
      <title>chrovox</title>

      <!-- This script adds WAMI capabilities to the web page. The devKey is domain specific. A new key is needed -->
      <!-- for each domain the page is deployed on.                                                               -->
      <script src="http://wami.csail.mit.edu/portal/wami.js?devKey=9e0ad087096c535c0714e085f28bf738"> </script>

      <script><!--

         var myWamiApp;
    
         function onLoad() {
           //div in which to put the audio button, see below
           var audioDiv = document.getElementById('AudioContainer'); 

           var jsgf = "#JSGF V1.0;\n" +
                      "grammar chrovox;\n" +
                      "public <top> = <command>;\n" +
                      "<command> = no {[command=back]} | wrong {[command=back]} | back {[command=back]}\n" +
                      "          | start over {[command=neword]} | new word {[command=neword]}\n" + 
                      "           ;";

           var grammar = {"language" : "en-us", "grammar" : jsgf };

           //Audio options.
           //pollForAudio: must be true for speech synthesis to work. 
           //If your application doesn't use speech synthesis, set this to false.
           var audioOptions = {"width": "200", "height": "50", "pollForAudio" : true};

           //Configuration options.
           //sendIncrementalResults: if true, you'll receive "incremental" recognition results as the user speaks
           //sendAggregates: if true, you'll receive a "semantic" interpretation.  Your grammar
           //must follow a specific format.
           var configOptions = {"sendIncrementalResults" : false, "sendAggregates" : true};

           //Handlers are functions which are called for various events:
           var handlers = {"onReady" : onWamiReady, //WAMI is loaded and ready
                           "onRecognitionResult" : onWamiRecognitionResult,  //Speech recognition result available
                           "onError" : onWamiError,  //An error occurred
                           "onTimeout" : onWamiTimeout}; //WAMI timed out due to inactivity
           //Create your WAMI application with the settings and grammar we just created
           myWamiApp = new WamiApp(audioDiv, handlers, "json", audioOptions, configOptions, grammar);
         }

         function onWamiReady() {
           alert("Wami ready");
           //hide the "Loading" message
           var loadingDiv = document.getElementById("LoadingDiv");
           loadingDiv.parentNode.removeChild(loadingDiv);
           myWamiApp.speak("Welcome to crow vox.");
         }

         //called when a speech recognition result is received
         //since we set sendIncrementalResults to false, this will only
         //be called after the user finishes speaking.  Otherwise,
         //it will be called many times as the user speaks.
         function onWamiRecognitionResult(result) {
           if(!result.hyps || result.hyps.length == 0 || !result.hyps[0].aggregate) {
               return;
           }

           //key value pairs
           var aggregate = result.hyps[0].aggregate;
           var kvs = aggregate.kvs;

           // process command
           if (kvs.command != null) {
               processCommand(kvs.command);
           }
         }

         //called when an error occurs
         function onWamiError(type, message) {
           alert("WAMI error: type  = " + type + ", message = " + message);    
         }

         //called when your WAMI session times out due to
         //in activity.
         function onWamiTimeout() {
           alert("WAMI timed out.  Hit reload to start over");
         }

         //called when user issues a command, like "new word" or "back"
         function processCommand(command) {
           if ("neword"==command) {
               neword();
           } else if ("back"==command) {
               back();
           }
         }

         // new word
         function neword() {
           alert("neword!");
         }

         // back
         function back() {
           alert("back!");
         }
    
   --></script>

<style type="text/css">
#PageTitle {
	font-family: Comic Sans MS, cursive;
	font-size: 48px;
}

#LoadingDiv {
	position: absolute;
	left: 45%;
	top: 300px;
	z-index: 1;
	background-color: blue;
	visibility: visible;
	width: 100px;
	height: 100px;
}
</style>
</head>

<body onload="onLoad()">
   <div id="MainDiv">
      <center>
      <div id="PageTitle">chrovox</div>
      <div id="AudioContainer"><!--  Audio button will be put here --></div>
      
      <br />

      <div style="font-size:small; color: grey;">
         Powered by the <a href="http://wami.csail.mit.edu/">WAMI Javascript API</a>
      </div>

      </center>
   </div>

   <div id="LoadingDiv">
      <center>
      <br>
      <br>
      Loading...
      </center>
   </div>

</body>
</html>

